<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="{{ url_for('static', filename='mobile/js/utils/rem.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>

    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/style/timetable.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/style/association.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/style/course.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/css/app.css') }}"
    />
  </head>

  <body>
    <div class="ass">
      <div class="ass-con">
        <div class="phone-header">
          <div class="phone-input-con">
            <input type="text" placeholder="search" class="phone-ass-input" />
            <img
              src="{{ url_for('static', filename='mobile/img/014.svg') }}"
              class="img-014 cursor-pointer"
              alt=""
            />
          </div>
        </div>

        <div class="ass-side">
          <div class="ass-header-phone">
            <div class="ass-logo">logo</div>
            <div class="ass-header-name">{{ school }}</div>
          </div>
          <ul class="ass-side-list">
            <li>
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">my course</div>
            </li>
            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">my task</div>
            </li>

            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">notification</div>
            </li>

            <li class="active">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">timetable</div>
            </li>

            <li>
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">Grades</div>
            </li>

            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">homework</div>
            </li>

            <li>
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">Social</div>
            </li>

            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">Societies</div>
            </li>
          </ul>
          <div class="under-line"></div>
          <div class="ass-workplace">
            <p>workplace</p>
            <button>
              <span>forum</span>
              <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                <path
                  d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                ></path>
              </svg>
            </button>
            <button>
              <span>My upload</span>
              <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                <path
                  d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                ></path>
              </svg>
            </button>
          </div>
          <a href="{{ url_for('auth.login') }}" class="signOut">
						<img class="signup" src="{{ url_for('static', filename='mobile/img/signup.svg') }}" alt="" />
						sign out
					</a>
        </div>

        <div class="ass-contents">
          <div class="ass-content" style="overflow: hidden">
            <div class="grade-left">
              <div class="find-teacher-header">
                <p>
                  This week's schedule
                  <span class="grade-time-tips"> March 21 —March 27 </span>
                </p>
                <div class="semester-con" style="display: none">
                  <p>
                    <span>First semester</span>
                    <img
                      src="{{ url_for('static', filename='img/008.svg') }}"
                      alt=""
                    />
                  </p>
                  <p>
                    <span>Second semester</span>
                    <img
                      src="{{ url_for('static', filename='img/008.svg') }}"
                      alt=""
                    />
                  </p>
                  <p>
                    <span>Third semester</span>
                    <img
                      src="{{ url_for('static', filename='img/008.svg') }}"
                      alt=""
                    />
                  </p>
                </div>
              </div>
              <div class="time-cons">
                <div class="time-con-list">
                  <div class="time-left">
                    <p class="time-top"></p>
                    <p class="time-left-list"><span>08 am</span></p>
                    <p class="time-left-list"><span>09 am</span></p>
                    <p class="time-left-list"><span>10 am</span></p>
                    <p class="time-left-list"><span>11 am</span></p>
                    <p class="time-left-list active"><span>12 am</span></p>
                    <p class="time-left-list"><span>01 pm</span></p>
                    <p class="time-left-list"><span>02 pm</span></p>
                    <p class="time-left-list"><span>03 pm</span></p>
                    <p class="time-left-list"><span>04 pm</span></p>
                    <p class="time-left-list"><span>05 pm</span></p>
                  </div>
                </div>
                <div class="time-con-list">
                  <p class="time-top">Mon</p>
                  <a href="/course/lesson/3" class="time-left-card time-gray-green">
                    <p class="time-left-title">
                      8:00-10:30
                      <br />
                      T -221
                    </p>
                    <p class="time-left-remart">Computer Programming Course work 2</p>
                  </a>
                  <a href="/course/lesson/3" class="time-left-card time-gray-green">
                    <p class="time-left-title">
                      2:00-3:30
                      <br />
                      T -221
                    </p>
                    <p class="time-left-remart">Interactive design Course work2</p>
                  </a>
                </div>
                <div class="time-con-list">
                  <p class="time-top">Tue</p>
                  <a href="/course/lesson/3" class="time-left-card time-gray-pink">
                    <p class="time-left-title">
                      8:00-10:30
                      <br />
                      T -221
                    </p>
                    <p class="time-left-remart">Database System Course work 2</p>
                  </a>
                </div>
                <div class="time-con-list">
                  <p class="time-top">Wed</p>

                  <a href="/course/lesson/3" class="time-left-card time-gray-gray">
                    <p class="time-left-title">
                      8:00-10:30
                      <br />
                      T -221
                    </p>
                    <p class="time-left-remart">Risk and Decision Course work2</p>
                  </a>
                </div>
                <div class="time-con-list">
                  <p class="time-top">Thu</p>

                  <a href="/course/lesson/3" class="time-left-card time-gray-orange">
                    <p class="time-left-title">
                      8:00-10:30
                      <br />
                      T -221
                    </p>
                    <p class="time-left-remart">Security And Authentication</p>
                  </a>
                </div>
                <div class="time-con-list">
                  <p class="time-top">Fir</p>

                  <a href="/course/lesson/3" class="time-left-card time-gray-purple">
                    <p class="time-left-title">
                      8:00-10:30
                      <br />
                      T -221
                    </p>
                    <p class="time-left-remart">Business Information System</p>
                  </a>
                </div>
                <div class="time-con-lines"></div>
              </div>
            </div>
            <div class="grade-right">
              <div class="time-right-con">
                <div class="time-title">
                  <span class="time-times">  Monday may 4,</span>
                  <div class="edit-cons">
                    <p class="time-edit" onclick="showEditFn()">edit</p>
                    <div class="edit-con">
                      <p class="edit-con-title">New event</p>
                      <div class="edit-con-list">
                        <p class="edit-name">event name</p>
                        <input type="text" placeholder="New event" />
                      </div>
                      <div class="edit-con-list">
                        <p class="edit-name">Time</p>
                        <input type="text" placeholder="7:10AM-10:00AM " />
                      </div>
                      <div class="edit-con-list">
                        <p class="edit-name">Remarks</p>
                        <input type="text" placeholder="speaking club " />
                      </div>
                      <button class="add-event">Add event</button>
                    </div>
                  </div>
                </div>
                <div class="timetable-con">
                  <div class="timetable-con-item">
                    <div class="timetable-side-left">
                      <p>8 am</p>
                      <p>9 am</p>
                      <p>10 am</p>
                    </div>
                    <a class="timetable-side-right" href="/course/lesson/3">
                      <div class="timetable-card timetable-purple">
                        <div class="timetable-line"></div>
                        <div>
                          <p class="timetable-time">
                            8-10am <img src=" src="{{ url_for('static',
                            filename='mobile/img/003.svg') }}"" alt="" />
                          </p>
                          <p class="timetable-title">
                            Computer Programming Course work 2
                          </p>
                          <p class="timetable-tip">
                            this lession is design for english
                            level 12
                          </p>
                        </div>
                      </div>
                    </a>
                  </div>

                  <div class="timetable-con-item">
                    <div class="timetable-side-left">
                      <p>11 am</p>
                      <p>12 am</p>
                    </div>
                    <a class="timetable-side-right" href="/course/lesson/3">
                      <div class="timetable-card timetable-purple">
                        <div class="timetable-line"></div>
                        <div>
                          <p class="timetable-time">
                            11-12am <img src=" src="{{ url_for('static',
                            filename='mobile/img/003.svg') }}"" alt="" />
                          </p>
                          <p class="timetable-title">Computer Programming Course work 2</p>
                        </div>
                      </div>
                    </a>
                  </div>

                  <div class="timetable-con-item">
                    <div class="timetable-side-left">
                      <p>2 am</p>
                      <p>3 am</p>
                      <p>4 am</p>
                    </div>
                    <a class="timetable-side-right" href="/course/lesson/3">
                      <div class="timetable-card timetable-purple">
                        <div class="timetable-line"></div>
                        <div>
                          <p class="timetable-time">
                            2:30-4:00 pm <img src=" src="{{ url_for('static',
                            filename='mobile/img/003.svg') }}"" alt="" />
                          </p>
                          <p class="timetable-title">
                            Interactive design Course work2
                          </p>
                          <p class="timetable-tip">
                            this lession is design for english
                            level 12
                          </p>
                        </div>
                      </div>
                    </a>
                  </div>

                  <div class="timetable-con-item">
                    <div class="timetable-side-left">
                      <p>7 am</p>
                      <p>8 am</p>
                      <p>9 am</p>
                    </div>
                    <a class="timetable-side-right" href="/course/lesson/3">
                      <div class="timetable-card timetable-purple">
                        <div class="timetable-line"></div>
                        <div>
                          <p class="timetable-time">
                            7：00-9:00 pm <img src=" src="{{ url_for('static',
                            filename='mobile/img/003.svg') }}"" alt="" />
                          </p>
                          <p class="timetable-title">Interactive design Course work2</p>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script
      src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script>
      function showEditFn(obj, event) {
        stopP(event);
        $(".edit-con").addClass("show");
      }

      function stopP(e) {
        var evt = e || window.event;
        evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
      }

      function hideEditFn() {
        $(".edit-con").removeClass("show");
      }

      function selectSemesterFn(num, event) {
        stopP(event);
        for (var i = -1; i < 2; i++) {
          $(".semester-con p").eq(i).removeClass("active");
        }
        $(".semester-con p").eq(num).addClass("active");
        $(".semes").text($(".semester-con p").eq(num).text());
      }

      $(".phone-header .img-014").click(function (e) {
        e.stopPropagation();
        $(".ass-side").css("display", "block");
      });
      $(".ass-con").click(function () {
        $(".ass-side").css("display", "none");
        hideEditFn();
      });
      $(".ass-side").click(function (event) {
        event.stopPropagation();
      });
      $(".ass-side-list>li:nth-child(1)").on("click", function () {
        location.href = "/student/course";
      });
      $(".ass-side-list>li:nth-child(4)").on("click", function () {
        location.href = "/student/timetable";
      });
      $(".ass-side-list>li:nth-child(5)").on("click", function () {
        location.href = "/student/grade";
      });
      $(".ass-side-list>li:nth-child(7)").on("click", function () {
        location.href = "/student/social";
      });
    </script>
  </body>
</html>
